<!DOCTYPE html>
<!-- 网站的语言 是中文 -->
<html lang="zh-CN">

<head>
    <!-- 编码格式是 utf-8 -->
    <meta charset="utf-8">
    <!-- 使用 最新式 ie 内核渲染
国内某些 所谓的 双核浏览器 或者是 直接 使用webkit去渲染
-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口属性
没有设置 禁用 用户缩放, 如果有需求可以添加
 -->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>红旅动漫</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link href="lib/css/bootstrap.min.css" rel="stylesheet">
    <!--
media queries 媒体查询
-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- hack写法 当lt less than 小于 ie9的时候  -->

    <!--[if lt IE 9]>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) bootstrap是基于jq的-->
    <script src="lib/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed 导入boot的一些js -->
    <script src="lib/js/bootstrap.min.js"></script>
    <script src="lib/js/html5shiv.js"></script>
    <script src="lib/js/respond.js"></script>
    <![endif]-->
</head>

<body>
<div class="box">
    <div class="menu">
        <div class="logo">
            <img src="http://www.hltm.tv/statics/tp/images/logo.png" alt="">
        </div>
        <ul class='list'>
            <li><a href="Serial.html">连载动漫 - get<span>&gt;</span></a></li>
            <li><a href="Special.html">专题列表 - get<span>&gt;</span></a></li>
            <li><a href="about.html">关于<span>&gt;</span></a></li>
        </ul>
    </div>
    <div class="bodybox">
        <header>
            <div class="top_bar">
                <a href="#" class='glyphicon glyphicon-menu-hamburger'></a>
                <h1>红旅动漫</h1>
                <a href="#" class='glyphicon glyphicon-search'></a>
            </div>

            <script>
                $(function () {
                    $('.glyphicon-menu-hamburger').click(function () {
                        $('.menu').slideDown();
                        $('.bodybox').css({
                            left:'60%'
                        });
                        $('.box').css({
                            overflow:'hidden'
                        });
                        $('.over').show();
                        })
                    $('.over').click(function () {
                        $('.menu').hide();
                        $('.bodybox').css({
                            left:'0'
                        });
                        $('.box').css({
                            overflow:'visible'
                        });
                        $('.over').hide();
                    })

                })
            </script>
        </header>
        <div class="container">
            <div class="banner clearfix">
            </div>
            <script src='js/template-native.js'></script>
            <script type='text/template' id='banner_imgs'>
                <ul class="banner_imgs clearfix">
                    <% for( var i = 0; i<array.length;i++){ %>
                    <li>
                        <a href="#"><img src="<%=array[i].img%>" alt=""></a>
                        <p><%=array[i].title%></p>
                    </li>
                    <% } %>
                </ul>
                <ul class='banner_index'>
                    <li></li>
                    <li></li>
                </ul>
            </script>
            <script>
                $(function () {

                    $.getJSON('http://127.0.0.1:9090/api/getlunbo', function (data) {
//            console.log(data);
                        var bannerImgs = template('banner_imgs',{array:data});
                        $('.banner').prepend(bannerImgs);
                    })
                })
            </script>
            <script>
                window.onload = function () {
                    var banner = document.querySelector('.banner');
                    var bannerImgs = document.querySelector('.banner_imgs');
                    var bannerIndex = document.querySelectorAll('.banner_index li');
                    var width = document.querySelector('.banner').offsetWidth;
                    var index =0;
                    bannerIndex[0].className='cur';
                    var timeId = setInterval(function () {
                        if(index===1){
                            index=1;
                            bannerImgs.style.transition = 'all 0.4s';
                            bannerImgs.style.transform = 'translateX(' + index*-width + 'px)'
                            for (var i = 0; i < bannerIndex.length; i++) {
                                bannerIndex[i].className='';
                            }
                            bannerIndex[index].className='cur';
                            index--;
                        }else if(index===0){
                            index=0;
                            bannerImgs.style.transition = 'all 0.4s';
                            bannerImgs.style.transform = 'translateX(' + index*-width + 'px)'
                            for (var j = 0; j < bannerIndex.length; j++) {
                                bannerIndex[j].className='';
                            }
                            bannerIndex[index].className='cur';
                            index++;
                        }
                    },1000);

                    var startX = 0,
                            moveX = 0;

                    banner.addEventListener('touchstart', function (e) {
                        startX = e.touches[0].clientX;
                        bannerImgs.style.transition = '';
                        clearInterval(timeId)
                    })
                    banner.addEventListener('touchmove', function (e) {
                        moveX = e.touches[0].clientX-startX;
                        if(index===1&&moveX<0){
                            return;
                        }else if(index===0&&moveX>0){
                            return;
                        }else {
                            bannerImgs.style.transform = 'translateX('+ (index*-width+moveX)+'px)'

                        }
                    })
                    banner.addEventListener('touchend', function (e) {
                        if(Math.abs(moveX)>width/4){
                            if(moveX>0){
                                index=0;
                            }else {
                                index=1;
                            }
                        }
                        bannerImgs.style.transition = 'all 0.2s';
                        bannerImgs.style.transform = 'translateX(' + index*-width + 'px)'
                        timeId = setInterval(function () {
                            if(index===1){
                                index=1;
                                bannerImgs.style.transition = 'all 0.4s';
                                bannerImgs.style.transform = 'translateX(' + index*-width + 'px)'
                                for (var i = 0; i < bannerIndex.length; i++) {
                                    bannerIndex[i].className='';
                                }
                                bannerIndex[index].className='cur';
                                index--;
                            }else if(index===0){
                                index=0;
                                bannerImgs.style.transition = 'all 0.4s';
                                bannerImgs.style.transform = 'translateX(' + index*-width + 'px)'
                                for (var j = 0; j < bannerIndex.length; j++) {
                                    bannerIndex[j].className='';
                                }
                                bannerIndex[index].className='cur';
                                index++;
                            }
                        },1000);
                    })
                }
            </script>
            <main>
                <div class="title clearfix">
                    <a href="#" class='cur'>新增连载</a>
                    <a href="#">新增完结</a>
                    <a href="#">推荐连载</a>
                    <a href="#">推荐完结</a>
                </div>
                <div class="content">

                </div>
            </main>
            <script type='text/template' id='items'>
                <ul class="items clearfix">
                    <% for( var i = 0; i<array.length;i++){ %>
                    <li class='item'>
                        <a href="#">
                            <img src="<%=array[i].img%>" alt="">
                            <p><%=array[i].update%></p>
                        </a>
                        <p><%=array[i].name%></p>
                    </li>
                    <% } %>
                </ul>

            </script>
            <script>
                $(function () {
                    $.getJSON('http://127.0.0.1:9090/api/gethometab/1', function (data) {
                        var items = template('items',{array:data});
                        $('.content').html(items);
                    })
                    $('.title a').each(function (i, v) {
                        $(v).on('click', function () {
//                console.log(i);
                            $.getJSON('http://127.0.0.1:9090/api/gethometab/'+(i+1)+'', function (data) {
                                var items = template('items',{array:data});
                                $('.content').html(items);
                            })
                        })
                    })
                })
            </script>
        </div>
        <div class="over"></div>
    </div>
</div>


</body>

</html>

